<template>
  <div id="navmenu">
  <el-row class="tac">
    <el-col :span="12">
      <h5>基础设施与平台部运维平台</h5>
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        router
      >
        <el-menu-item index="1" :index="client_url">
            <i class="el-icon-upload2"></i>
            <span>客户端连接</span>
        </el-menu-item>
        <el-menu-item index="2" :index="data_url">
            <i class="el-icon-connection"></i>
            <span>数据库连接</span>
        </el-menu-item>
        <el-menu-item index="3" :index="sync_url">
          <i class="el-icon-s-data"></i>
          <span slot="title">同步设置</span>
        </el-menu-item>
        <el-menu-item index="4" :index="executed_url">
          <i class="el-icon-notebook-2"></i>
          <span slot="title">日志记录</span>
        </el-menu-item>
        <el-menu-item index="5" :index="about_url">
          <i class="el-icon-info"></i>
          <span slot="title">关于</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
    </div>
</template>

<script>
  export default {
    name: "NavMenu",
    data() {
      return {
        isCollapse: true,
        data_url: '/hxdata',
        sync_url: '/datasync',
        executed_url: '/hxlog',
        client_url: '/hxclient',
        about_url: '/about'
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        //console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        //console.log(key, keyPath);
      }
    }
  }
</script>

<style scoped>
  .el-row {
    height: 100%;
  }

  .el-col {
    width: 100%;
  }

  h5 {
    height: 100px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
    color: #feeeed;
    margin: 0;
    padding: 0;
  }

  .el-menu-vertical-demo, .el-submenu, .el-menu-item {
    background-color: #afdfe4;
  }
</style>
